import React from 'react';
import { Button, Card, Content } from 'react-fule-ui';

// 代码块
import CMarkdown from './../../components/CMarkdown';
// 数据
import { Demo1, Demo2, Demo3, Demo4 } from './demo.js';

export default function FuleButton() {
  const aaa = () => console.log('你点击了button按钮');
  return (
    <Content>
      <Content.Header>按钮</Content.Header>
      <Content.Body>
        <Card>
          <Card.Header>button - 水波纹</Card.Header>
          <Card.Body>
            <div className="demo-block">
              <Button type="button" primary ripple={true}>
                水波纹
              </Button>
            </div>
            <div className="demo-block">
              <Button type="button" ripple={true}>
                水波纹
              </Button>
            </div>
            <CMarkdown data={Demo1} style={{ marginTop: '16px' }} />
          </Card.Body>
        </Card>
        <Card>
          <Card.Header>button - 基础按钮</Card.Header>
          <Card.Body>
            <div className="demo-block">
              <Button type="button" primary onClick={aaa}>
                点击试试
              </Button>
            </div>
            <div className="demo-block">
              <Button type="button">button按钮</Button>
            </div>
            <CMarkdown data={Demo2} style={{ marginTop: '16px' }} />
          </Card.Body>
        </Card>
        <Card>
          <Card.Header>button - 无边框</Card.Header>
          <Card.Body>
            <div className="demo-block">
              <Button type="button" empty primary href="#/FuleButton">
                button按钮
              </Button>
            </div>
            <div className="demo-block">
              <Button type="button" empty href="#/FuleButton">
                button按钮
              </Button>
            </div>
            <CMarkdown data={Demo3} style={{ marginTop: '16px' }} />
          </Card.Body>
        </Card>
        <Card>
          <Card.Header>Link - 按钮</Card.Header>
          <Card.Body>
            <div className="demo-block">
              <Button type="link" primary href="#/FuleButton">
                link按钮
              </Button>
            </div>
            <div className="demo-block">
              <Button type="link" href="#/FuleButton">
                link按钮
              </Button>
            </div>
            <div className="demo-block">
              <Button type="link" empty primary href="#/FuleButton">
                link按钮
              </Button>
            </div>
            <div className="demo-block">
              <Button type="link" empty href="#/FuleButton">
                link按钮
              </Button>
            </div>
            <CMarkdown data={Demo4} style={{ marginTop: '16px' }} />
          </Card.Body>
        </Card>
      </Content.Body>
    </Content>
  );
}
